<template>
    <el-dialog :title="title" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible">
      <el-form :model="expressForm" label-width="100px" size="small">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="模板名称">
                <el-input size="small" v-model.trim="expressForm.name" placeholder="请输入模板名称" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="计费方式">
                <el-radio-group v-model="expressForm.type">
                    <el-radio :label="1">按件数</el-radio>
                    <el-radio :label="2">按重量</el-radio>
                    <el-radio :label="3">按体积</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="配送区域及运费">
                <el-table :data="expressForm.listData" border class="full-width margin_top_20">
                    <el-table-column prop="date" label="可配送区域">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.areaName" placeholder="请输入可配送区域" maxlength="30"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="首件">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.initCount" placeholder="请输入" :precision="0" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="运费">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.initPrice" placeholder="请输入" :precision="2" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="续件">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.continueCount" placeholder="请输入" :precision="0" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="续费">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.continuePrice" placeholder="请输入" :precision="2" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="removeOneItem(scope.$index, 'listData')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="margin_top_20"><el-button @click="addOneItem('listData')">添加配送区域</el-button></div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="指定包邮">
              <el-switch size="small" v-model="expressForm.status"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item>
                <el-table :data="expressForm.appointData" border class="full-width margin_top_20">
                    <el-table-column prop="date" label="地区">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.areaName" placeholder="请输入地区" maxlength="30"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="包邮件数">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.initCount" placeholder="请输入" :precision="0" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="包邮金额">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.initPrice" placeholder="请输入" :precision="2" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="续件">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.continueCount" placeholder="请输入" :precision="0" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="续费">
                        <template slot-scope="scope">
                            <el-input-number size="small" v-model.trim="scope.row.continuePrice" placeholder="请输入" :precision="2" :min="0" :max="9999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="removeOneItem(scope.$index, 'appointData')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="margin_top_20"><el-button @click="addOneItem('appointData')">单独指定包邮</el-button></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModel()">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="closeModel()">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
    props: ['visible', 'title'],
    data() {
        return {
            expressForm: {
                name: '',
                type: null,
                listData: [],
                status: false,
                appointData: []
            },
            submitLoading: false
        }
    },
    methods: {
        removeOneItem(index, name) {
            this.expressForm[name].splice(index, 1);
        },
        addOneItem(name) {
            this.expressForm[name].push({
                id: '',
                areaName: '',
                initCount: 0,
                initPrice: 0,
                continueCount: 0,
                continuePrice: 0
            });
        },
        closeModel() {
            this.$emit('update:visible', false);
        }
    }
}
</script>
